<template>
	<view class="content">
		<nav-bars title="已绑定POS" isBack backColor="#fff"  color="#fff" background="#333333"></nav-bars>
		<view class="main-area" v-if="poslist.length > 0">
			<view class="title">
				已绑定的pos机
			</view>
			<view class="pos-list">
				<view class="wrap" v-for="(item,index) in poslist" :key="index">
					<view class="name">
						无线POS-{{item.vspTermid}}
					</view>
				</view>
			</view>
		</view>
		<view class="main-area" v-else>
			<view class="title">
				暂无绑定pos机
			</view>
		</view>
		<view class="footer" @click="goSkip('/pagesFour/posPayment/posmake')">
			<view class="round-btn">
				<image :src="`${baseImg}/static/pos/arrow_right.png`"></image>
				</view>
		</view>
	</view>
</template>

<script>
	import service_enter from '@/service/enter.js'
	export default {
		data() {
			return {
               poslist:[],
			   baseImg:this.$static,
			}
		},
		onLoad() {
            
		},
		onShow() {
			this.gitdata()
		},
		methods: {
			gitdata(){
				service_enter.poslist({
					vspCusid:this.vspCusid,
					vspTermid:this.vspTermid
				}).then(res=>{
					if(res.code === 1){
						uni.hideLoading()
						let data = res.data
				        this.poslist = data.list
					}else{
						uni.hideLoading()
						uni.showToast({ title: res.msg, icon: 'none' });
					}
				})
			},
			goSkip(url) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		.main-area{
			
			.title{
				font-size: 42rpx;
				font-weight: bold;
				color: #242424;
				margin-top: 240rpx;
				text-align: center;
			}
			.pos-list{
				margin-top:90rpx;
				.wrap{
					width: 610rpx;
					height: 100rpx;
					margin: auto;
					margin-bottom: 20rpx;
					background: #FFFFFF;
					border: 2rpx solid #242424;
					border-radius: 50rpx;
					text-align: center;
					.name{
						color: #242424;
						line-height: 100rpx;
					}
				}
			}
		}
		.footer {
			width: 100%;
			position: absolute;
			bottom: 120rpx;
			color: #fff;
			.round-btn{
				width: 146rpx;
				height: 146rpx;
				margin: auto;
				background: #DBA855;
				border-radius: 50%;
				image{
					position: absolute;
					width: 70rpx;
					height: 34rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					vertical-align: middle;
				}
			}
		}
	}

	

	

	

	
</style>
